<template>
  <view class="container" @click="closeClick">
    <page-meta :page-style="showhand?'overflow: hidden;' : 'overflow: auto;'"></page-meta>

    <view class="titleBar" :style="{'top':  ''+ statusBarHeight  +'px'}">
      <image src="/static/images/indexpage/goback-icon.png" class="leftImg" @click.stop="goback()"></image>
      <image src="/static/images/indexpage/delete-icon.png" class="rightImg" v-if="otObj.del_role == 1" @click.stop="deletePost()"></image>
    </view>
    <view class="bgBox">
      <u-swiper :list="otObj.imgList" height="1112" border-radius="0" mode="rect">

      </u-swiper>
    </view>
    <view class="bottom-box" :style="{'padding-bottom':''+ safeareabottom +'px'}">

      <view class="demo-name">
        <view class="name"> {{otObj.title}}</view>
      </view>

      <view class="demo-text">
        <view class="text">{{otObj.main_content}}</view>
      </view>

      <view class="demo-tag-address">
        <view class="demo-tag ">
          <view class="time">{{otObj.createtime}}</view>
        </view>
        <view class="demo-tag demo-address">
          <view class="pic">
            <image class="img-tag" src="/static/images/indexpage/topic-icon.png"></image>
          </view>
          <view class="price">{{otObj.label}}</view>
        </view>
      </view>

      <view class="demo-dinwei">
        <view class="pic">
          <image class="img-tag" src="/static/images/indexpage/address-icon.png"></image>
        </view>
        <view class="price"> {{otObj.address_text}}</view>
      </view>
      <u-gap height="24" bg-color="#E6E6E6"></u-gap>
      <!-- <view class="demo-title">
        <view class="name"> 代加工描述</view>
      </view>
      <view class="demo-text">
        <view class="text"> {{form.text}}</view>
      </view>
      <view class="img-st">
        <image class="img-tag" src="/static/images/logo.png"></image>
      </view> -->

      <!-- <u-gap height="24" bg-color="#E6E6E6"></u-gap> -->

      <!--评论-->
      <view class="review-box">
        <view class="sum-box">共{{otObj.comment_num}}条评论</view>
        <view class="line-box" v-for="(item,index) in list" :key="index">
          <view class="content-box">
            <view class="line">
              <view class="pic">
                <image class="point-tag" :src="item.avatar"></image>
              </view>
              <view class="name"> {{item.nickname}}</view>
              <view class="standing" v-if="item.is_author == 1">楼主</view>
              <view class="time">{{item.createtime}}</view>
            </view>
            <view class="value">
              {{item.main_content}}
            </view>
          </view>
        </view>
        <view class="nodata-st" v-if="form.page==form.last_page"> ------没有更多数据了------</view>
        <view class="nodata-st" v-if="list.length ==0"> ------暂无数据------</view>

      </view>
    </view>
    <view class="x-footBar">
      <view class="footPublish" v-if="!isShow">
        <view class="myInput">
          <u-input type="textarea" height="52" placeholder="说点什么" auto-height maxlength="500" @click="goWrith()" />
        </view>
        <view class="right-box">
          <view class="img">
            <image class="img-tag" :src="otObj.goods==0?'/static/images/indexpage/zan.png':'/static/images/indexpage/tozan.png'" @click.stop="getTrendsGoods()"></image>
          </view>
          <view class="value">{{otObj.good_num}}</view>
          <view class="img">
            <image class="img-tag" src="/static/images/indexpage/kan.png"></image>
          </view>
          <view class="value">{{otObj.see_num}}</view>
          <view class="img">
            <image class="img-tag" src="/static/images/indexpage/yan.png"></image>
          </view>
          <view class="value">{{otObj.comment_num}}</view>
        </view>
      </view>

      <view class="footPublish" v-if="isShow">
        <view class="myInput">
          <u-input type="textarea" height="52" placeholder="说点什么" auto-height v-model="main_content" :focus="true" maxlength="500" />
        </view>
        <view class="right" @click.stop="getCommentInsert">
          <u-icon name="chat" size="35"></u-icon>
          <text class="u-padding-left-10">发布</text>
        </view>
      </view>
    </view>
    <view v-if="showhand" class="bg-st" @click.stop="sethand()">
      <image src="/static/images/indexpage/xiahua-icon.png" class="shoushi" @click.stop="sethand()"></image>
    </view>
    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>
    <!-- <popUpWin :popUpWinShow="popUpWinShow" @showJubao="showJubao"></popUpWin> -->
  </view>
</template>

<script>
import api from '@/api/index.js'
// import popUpWin from './popUpWin.vue'
export default {
  components: {
    // popUpWin
  },
  data() {
    return {
      screenHeight: uni.getStorageSync('screenHeight') - uni.getStorageSync('safeAreaBottom'),
      safeareabottom: uni.getStorageSync('safeAreaBottom') + 48,
      statusBarHeight: uni.getStorageSync('statusBarHeight') + 10,
      form: {
        imgList: [{
          image: '/static/images/indexpage/ershoubg.png',
          title: '昨夜星辰昨夜风，画楼西畔桂堂东'
        },
        {
          image: '/static/images/indexpage/ershoubg1.png',
          title: '身无彩凤双飞翼，心有灵犀一点通'
        },
        ],
        address: '地址',
        tag: '铜管乐器',
        time: '2023年02月13日 07:35',
        price: '123',
        name: 'dasda',
        text: '教续言边样比留那品难研而人近对，化事似，的不电，轮示奖台费叫东际我大远引易花害，童量的！书来时有希相以？轻地且满？单有台告病；子云如特台化国。教续言边样比留那品难研而人近对，化事似，的不电，轮示奖台费叫东际我大远引易花害，童量的！书来时有希相以？轻地且满？单有台告病；子云如特台化国。'
      },
      content: '',
      isShow: false,

      reviewList: [
        {
          shengfen: '', avatar: '/static/images/logo.png', name: '楼主', time: '2022/07/26 12:50:58', content: '北雀路一小区居民开灯时，家中突然爆燃！窗户被炸飞，周围3辆汽车受损',
          children: [{ shengfen: 'louzhu', avatar: '/static/images/logo.png', name: '楼主', time: '2022/07/26 12:50:58', content: '北雀路一小区居民开灯时，家中突然爆燃！窗户被炸飞，周围3辆汽车受损', },
          ]
        },
        {
          shengfen: 'louzhu', avatar: '/static/images/logo.png', name: '楼主', time: '2022/07/26 12:50:58', content: '北雀路一小区居民开灯时，家中突然爆燃！窗户被炸飞，周围3辆汽车受损',

        }
      ],
      otObj: {
      },
      main_content: '',
      isShow: false,
      popUpWinShow: true,

      formObj: {
        types: '',
        id: '',
      },
      form: {
        page: 1,
        page_size: 10,
        last_page: 0,
      },
      list: [],
      //举报参数
      jubaoObj: {},
      contractObj: {
        title: '提示',
        content: '是否确认删除?',// content: '是否对该用户取消关注?',//content: '是否将该用户移出黑名单?',
        isShow: false,
        showBotton: true,
        cancelText: '否',
        confirmText: '是',
        showOneBotton: false
      },
      showhand: false,
      isCanRequest: true
    };
  },
  onLoad(options) {
    this.formObj.types = options.types
    this.formObj.id = options.id
    this.init()
    if (uni.getStorageSync('isShowHand') == 'true' || uni.getStorageSync('isShowHand') == '') {
      this.showhand = true
      setTimeout(() => {
        this.showhand = false
        uni.setStorageSync('isShowHand', 'false');
      }, 2000);
    }
  },
  onReachBottom() {
    if (this.form.page < this.form.last_page) {
      this.form.page += 1;
      this.getDev_comment();
    }
  },
  onPullDownRefresh() {
    this.init()
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods: {
    setIsRequestFlag() {
      if (this.isCanRequest) {
        this.isCanRequest = false
        setTimeout(() => {
          this.isCanRequest = true
        }, 5000)
        return true
      } else {
        return false
      }
    },
    init() {
      //获取详情
      this.getpage()
      //获取评论
      this.initcomment()
    },
    initcomment() {
      this.form.page = 1;
      this.form.last_page = 0;
      this.getDev_comment()
    },
    deletePost() {
      let that = this
      that.contractObj.content = '是否确认删除?'
      that.contractObj.isShow = true
    },
    cancel(e) {
      this.contractObj.isShow = false
    },
    //删帖
    confirm() {
      api.base.getTrendsDeletet(this.formObj).then(res => {
        if (res.code == 1) {
          uni.$u.toast("删除成功")
          this.contractObj.isShow = false
          uni.$emit("isSeach", {
            isSeachFlag: true
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    getpage() {
      api.base.getTrendsDetail(this.formObj).then(res => {
        if (res.code == 1) {
          this.otObj = res.data;
          this.otObj.imgList = []
          for (let i = 0; i < res.data.images.length; i++) {
            this.otObj.imgList.push({
              image: res.data.images[i],
              title: i
            })
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateBack(1);
          }, 1000)
        }
      });
    },
    getDev_comment() {
      api.base.getDev_comment({ ...this.formObj, ...this.form }).then(res => {
        if (res.code == 1) {
          this.list = this.form.page === 1 ? res.data.data : this.list.concat(res.data.data);
          this.form.last_page = res.data.last_page;
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    //点赞取消
    getTrendsGoods() {
      api.base.getTrendsGoods(this.formObj).then(res => {
        if (res.code == 1) {
          uni.$u.toast(res.msg)
          if (this.otObj.goods == 0) {
            this.otObj.goods = 1
            this.otObj.good_num++
          } else {
            this.otObj.goods = 0
            this.otObj.good_num--
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    //关注取消
    getTrendsFollow() {
      api.base.getTrendsFollow({ third_uid: this.otObj.author_id }).then(res => {
        if (res.code == 1) {
          uni.$u.toast(res.msg)
          if (this.otObj.follow == 1) {
            this.otObj.follow = 0
          } else {
            this.otObj.follow = 1
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    goWrith() {
      this.isShow = true
    },
    closeClick() {
      this.isShow = false

    },
    //评论
    getCommentInsert() {
      let flag = this.setIsRequestFlag()
      if (!flag) {
        console.log('不让请求')
        return
      } else {
        api.base.getCommentInsert({ ...this.formObj, ...{ main_content: this.main_content } }).then(res => {
          if (res.code == 1) {
            uni.$u.toast("评论成功")
            this.isShow = false
            this.main_content = ''
            this.otObj.comment_num++
            this.initcomment()
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            });
          }
        });
      }

    },
    //删帖
    getTrendsDeletet() {
      api.base.getTrendsDeletet(this.formObj).then(res => {
        if (res.code == 1) {
          uni.$u.toast("删除成功")
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    //弹出举报页面
    showJubao() {
      let that = this

      that.jubaoObj = {
        ...{
          author_name: that.otObj.author_name,
          label: that.otObj.label,
          main_content: that.otObj.main_content
        }, ...that.formObj
      }
      that.popUpWinShow = !that.popUpWinShow
    },
    goback() {
      uni.navigateBack(1)
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  // padding-bottom:120rpx;
  .titleBar {
    width: 100%;
    // height: 88rpx;
    color: #fff;
    font-size: 32rpx;
    line-height: 88rpx;
    font-weight: bold;
    display: flex;
    padding: 0 32rpx;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    // top: 0px;
    right: 0px;
    z-index: 99;

    .leftImg {
      width: 48rpx;
      height: 48rpx;
    }
    .rightImg {
      width: 48rpx;
      height: 48rpx;
    }

    .fenImg {
      width: 48rpx;
      height: 50rpx;
    }
  }
}

.bgBox {
  position: absolute;
  width: 100vw;
  height: 1112rpx;
  overflow: hidden;
  top: 0;
  z-index: 1;
}

.bg-st {
  width: 100%;
}

.bottom-box {
  position: relative;
  top: 1042rpx;
  width: 750rpx;
  // height: 270rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;
  z-index: 2;
  .demo-price {
    font-family: HarmonyOS Sans-Bold, HarmonyOS Sans;
    font-weight: bold;
    color: #ff2544;
    height: 56rpx;
    line-height: 56rpx;
    padding-top: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    .pic {
      float: left;
      font-size: 24rpx;
      line-height: 68rpx;
      .point-tag {
        width: 40rpx;
        height: 40rpx;
        border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
      }
    }
    .price {
      float: left;
      padding-left: 5rpx;
      font-size: 48rpx;
      color: #ff2544;
    }
  }
  .demo-avatar {
    height: 72rpx;
    line-height: 104rpx;
    padding-top: 32rpx;
    padding-left: 32rpx;
    margin-bottom: 16rpx;
    display: flex;
    position: relative;
    .pic {
      display: flex;
      justify-content: center;
      align-items: center;
      float: left;
      width: 72rpx;
      height: 72rpx;
      .point-tag {
        width: 72rpx;
        height: 72rpx;
        border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
      }
    }
    .name {
      height: 72rpx;
      line-height: 72rpx;
      padding-left: 16rpx;
      padding-right: 24rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .status {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      .status-tag {
        width: 120rpx;
        height: 50rpx;
      }
    }
    .jubao {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 72rpx;
      .jubao-tag {
        position: absolute;
        right: 32rpx;
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
  .demo-name {
    // height: 54rpx;
    padding-left: 32rpx;
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    padding-top: 32rpx;
    padding-bottom: 32rpx;
  }
  .demo-text {
    margin: 32rpx;
    line-height: 42rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    // font-weight: 500;
    color: #333333;
  }
  .demo-tag-address {
    margin: 0rpx 32rpx 32rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 47rpx;
    display: flex;
    justify-content: space-between;
    .demo-tag {
      // padding-left: 16rpx;
      // padding-right: 16rpx;
      display: flex;
      // width: 168rpx;
      height: 36rpx;
      background: #ffffff;

      border-radius: 29rpx;
      justify-content: center;
      align-items: center;
      .pic {
        width: 24rpx;
        height: 24rpx;
        display: flex;
        justify-content: center;
        align-content: center;
        .img-tag {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .price {
        padding-left: 12rpx;
        font-size: 18rpx;
        color: #999999;

        height: 36rpx;
        line-height: 36rpx;
      }
      .time {
        color: #999999;
        font-size: 22rpx;
        height: 36rpx;
        line-height: 36rpx;
      }
    }
    .demo-address {
      padding-left: 16rpx;
      padding-right: 16rpx;
      background: rgba(109, 12, 247, 0.1);
      .price {
        color: #6d0cf7;
      }
      .pic {
        height: 24rpx;
        line-height: 24rpx;
        width: 24rpx;
        height: 24rpx;
        // border-radius: 100rpx;
        // background: #6d0cf7;
        font-size: 24rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-content: center;
        .img-tag {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
  }
  .demo-dinwei {
    display: flex;
    line-height: 112rpx;
    align-content: center;

    width: calc(100% - 64rpx);
    margin: 0 32rpx 32rpx 32rpx;
    background: #f5f5f5;
    height: 112rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .pic {
      width: 48rpx;
      height: 112rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 28rpx;
      margin-right: 18rpx;
      .img-tag {
        width: 48rpx;
        height: 48rpx;
      }
      .price {
        padding-left: 12rpx;
        font-size: 28rpx;
        color: #333333;
        height: 64rpx;
        line-height: 64rpx;
      }
    }
  }
  .demo-title {
    height: 46rpx;
    font-size: 30rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 46rpx;
    margin: 24rpx 32rpx;
  }
  .img-st {
    margin: 30rpx 32rpx 48rpx 32rpx;
    width: calc(100% - 64rpx);
    height: 360rpx;
    .img-tag {
      width: 100%;
      height: 360rpx;
    }
  }
  .demo-degree {
    margin: 32rpx;
    padding: 16rpx;
    background: #f5f5f5;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    .text-box {
      width: 88rpx;
      height: 34rpx;
      background: rgba(109, 12, 247, 0.1);
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      opacity: 1;
      font-size: 18rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #6d0cf7;
      line-height: 34rpx;
      padding: 4rpx 8rpx 4rpx 8rpx;
    }
    .text1-box {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 33rpx;
    }
  }
  .review-box {
    .sum-box {
      height: 42rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 42rpx;
      margin-left: 32rpx;
      margin-top: 24rpx;
    }
    .line-box {
      border-bottom: 2rpx solid #f2f2f2;
      margin: 24rpx 32rpx 24rpx 32rpx;
      .content-box {
        margin-bottom: 32rpx;
        .line {
          height: 64rpx;
          line-height: 64rpx;
          display: flex;
          align-items: center;
          position: relative;
          .pic {
            width: 64rpx;
            height: 64rpx;
            border-radius: 38rpx 38rpx 38rpx 38rpx;
            .point-tag {
              width: 64rpx;
              height: 64rpx;
              border-radius: 8040rpx 8040rpx 8040rpx 8040rpx;
            }
          }
          .name {
            padding-left: 16rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #333333;
          }
          .standing {
            margin-left: 16rpx;
            width: 53rpx;
            height: 35rpx;
            background: rgba(109, 12, 247, 0.1);
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            font-size: 18rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #6d0cf7;
            line-height: 35rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .time {
            position: absolute;
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 500;
            color: #999999;
            right: 0rpx;
            top: 0rpx;
          }
        }
        .value {
          margin: 16rpx 0rpx 24rpx 80rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 42rpx;
        }
      }
      .content-box2 {
        margin-left: 80rpx;
        .value {
          margin: 16rpx 0rpx 24rpx 0rpx;
        }
      }
    }
  }
}
.footPublish {
  display: flex;
  align-items: center;
  height: 104rpx;
  .myInput {
    display: inline-block;
    background: #f7f7f7;
    border-radius: 40rpx;
    opacity: 1;
    border: 1rpx solid rgba(0, 0, 0, 0.12);
    flex: 1;
    padding: 4rpx 18rpx;
    ::v-deep.u-input__textarea {
      min-height: 0 !important;
    }
    // ::v-deep(.u-input__textarea) {
    //   height: 70rpx;
    //   line-height: 70rpx;
    //   // border: 1rpx solid red;
    //   padding: 2rpx 5rpx;
    // }
  }

  .right {
    display: inline-block;
    background: #333333;
    margin-left: 24rpx;
    border-radius: 60rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffffff;
    line-height: 42rpx;
    padding: 10rpx 26rpx;
  }
  .right-box {
    display: flex;
    height: 42rpx;
    line-height: 42rpx;
    padding-left: 6rpx;
    .img {
      width: 40rpx;
      padding-left: 16rpx;
      margin-right: 10rpx;
      .img-tag {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .value {
      padding-left: 10rpx;

      font-size: 28rpx;
      font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
      font-weight: 400;
      color: #333333;
      // padding-right: 30rpx;
    }
  }
}
.x-footBar {
  // height: 104rpx !important;
  padding: 0rpx 26rpx 26rpx 32rpx !important;
  // box-sizing: border-box;
}
.bg-st {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  justify-content: center;
  .shoushi {
    width: 88rpx;
    height: 88rpx;
    position: absolute;
    bottom: 200rpx;
  }
}
</style>